<div class="companyFlex">
    <div class="evaL">
            <div class="f-comment-container" id="commentNumber">
                <div class="f-usercomment-container" >
                    <div ui--evaluate  comment-conf="commentConf" ng-if="commentConf"></div>
                </div>
            </div>
        </div>
    <div class="evaR">
        <div class="topstar">
            <p><span ng-bind="CompanyEva.count"></span>人评价</p>
            <div class="starCon">
                <div class="star2" star rating-value="ratingVal" max="max" on-hover="onHover" on-leave="onLeave" readonly="{{readonly}}"></div>
            </div>
        </div>
        <div class="progress">
            <p>5星</p>
            <div class="progressBg">
                <div ng-class="['progress-bar', vm.style]" ng-style="{width: value5 + '%'}" class="progress-bar progress-bar-danger">
                </div>
            </div>
            <p>{{ value5 }}%</p>
        </div>
        <div class="progress">
            <p>4星</p>
            <div class="progressBg">
                <div ng-class="['progress-bar', vm.style]" ng-style="{width: value4 + '%'}" class="progress-bar progress-bar-danger">
                </div>
            </div>
            <p>{{ value4 }}%</p>
        </div>
        <div class="progress">
            <p>3星</p>
            <div class="progressBg">
                <div ng-class="['progress-bar', vm.style]" ng-style="{width: value3 + '%'}" class="progress-bar progress-bar-danger">
                </div>
            </div>
            <p>{{ value3}}%</p>
        </div>
        <div class="progress">
            <p>2星</p>
            <div class="progressBg">
                <div ng-class="['progress-bar', vm.style]" ng-style="{width: value2 + '%'}" class="progress-bar progress-bar-danger">
                </div>
            </div>
            <p>{{ value2 }}%</p>
        </div>
        <div class="progress">
            <p>1星</p>
            <div class="progressBg">
                <div ng-class="['progress-bar', vm.style]" ng-style="{width: value1 + '%'}" class="progress-bar progress-bar-danger">
                </div>
            </div>
            <p>{{ value1 }}%</p>
        </div>
    </div>

</div>
<style>
    .evaL{
        width:871px;
        float: left;
        margin-top: -7px;
    }
    .evaCon{
        height:500px;
        width:100%;
        background: #fff;
        margin-bottom:40px;
        margin-top:20px;
    }
    .evaR{
        float: right;
        width:309px;
        height:236px;
        border:1px solid #ddd;
        background: #fff;
        margin-top:20px;
        margin-bottom:30px;
    }
    .star{
        float: left;
        height:18px;
        margin-left:15px;
        margin-top:36px;
        margin-bottom:15px;
    }
    .starCon{
        float: left;
        width:80px;
        height:21px;
        padding-right:15px;
    }
    .star p{
        float: left;
        font-weight: bold;
    }
    .star .eavNum{
        float: left;
    }
    .star .eavNum span{
        padding-right:10px;
        color: #ff3c00;
    }
    .star .eavNum i{
        font-style: normal;
    }
    /*星级评价*/
    .rating {
        margin: 0;
        padding: 0;
    }
    ul.rating {
        display: inline-block;
    }
    .rating p {
        display: inline-block;
        width:16px;
        height:16px;
        background: url("them/imgs/star-off.png") no-repeat;
        cursor: pointer;
    }
    .rating .filled {
        background: url("them/imgs/star-on.png") no-repeat;
    }
    .evaDate{
        margin-left:15px;
        clear: both;
        height:26px;
        line-height:26px;
        width:100%;
    }
        .evaDate ul li {
            float: left;
        }
        .evaDate ul li.evaTime{
            padding-right:32px;
        }
        .evaDate ul li.date{
            margin-top: -5px;
            margin-left: 20px;
        }
    .Satisfaction{
        margin-left:15px;
        clear: both;
        height:26px;
        line-height:26px;
        width:100%;
    }
    .Satisfaction ul li{
        float: left;
        padding-right:33px;
        cursor: pointer;
    }
         .Satisfaction ul li.SaTitle {
             padding-right:20px;
         }
    .progress{
        height:22px;
        clear: both;
        margin-top:13px;
    }
    .progress p{
        float: left;
        margin-left:12px;
        margin-right:17px;
    }
    .progressBg{
        float: left;
        width:170px;
        height:10px;
        background: #f1f1f1;
        float: left;
        margin-top:3px;
    }

    .proNum{
        margin-top: 4px;
        float: left;
        color: #30a3ff;
        margin-left:10px;
    }
    .progress-bar{
        background: #ff3c00;
        height:10px;
    }
    .progress input{
        width:204px;
        height:20px;
        border:1px solid #ddd;
        margin-left:18px;
    }
    .progress i{
        margin-left:20px;
        color: #30a3ff;
        cursor: pointer;
    }

    .evaR .topstar{
        margin-left:12px;
        height:53px;
        line-height:53px;
        border-bottom:1px solid #ddd;
    }
    .evaR  .topstar .starCon {
        float: left;
        margin-top:17px;
        margin-left:22px;
    }
    .evaR .topstar p{
        float: left;
    }
</style>